import React, {useEffect, useRef, useState} from 'react';
import {Image, ScrollView, StyleSheet, Text, TextInput, View,} from 'react-native';
import Header from '../../widgets/Header';
import {FontFamily, getffly} from '../../utils/common';
import screen from '../../utils/screen';
import {LGBtn} from '../../widgets/buttons';
import {AppModal} from '../../widgets/modal';
import Constants from '../../utils/Constants';
import Images from '../../images/Images';
import VerifyDialog from '../../components/VerifyDialog';


export default ({navigation})=>{


    const verifyDialog = useRef()
    const [psw,setPsw] = useState('')
    const [newpsw,setNewpsw] = useState('')
    const [newpsw1,setNewpsw1] = useState('')
    const [phone,setPhone] = useState(null)
    const [enable,setEnable] = useState(false)


    useEffect(()=>{
        const {mobile} = navigation.state.params
        setPhone(mobile)


    },[])

    useEffect(()=>{
        if(psw.length && newpsw.length && newpsw1.length){
            setEnable(true)
        }else{
            setEnable(false)
        }

    },[psw,newpsw,newpsw1])

    const onSubmit = ()=>{
        if(newpsw != newpsw1){
            AppModal.showTip(Constants.error.password_does_not_match)
            return
        }
        if(newpsw.length < 6){
            AppModal.showTip(Constants.error.at_least_6_characters)
            return
        }
        let isnum = /^\d+$/.test(newpsw);
        if(isnum){
            AppModal.showTip(Constants.error.cannot_contain_only_numbers)
            return
        }

        // changePsw();
        verifyDialog.current.show(phone,()=>{
            navigation.pop()
        },true)
    }


    return (
        <View style={styles.container}>

            <Header title={Constants.login.retrieve_password} navigation={navigation}/>

            <ScrollView contentContainerStyle={styles.content}>

                <Text style={{fontSize: 12,color:'#000',marginTop: screen.PIXEL_30}}>{Constants.login.current_password}</Text>

                <View style={styles.inputWrap}>
                    <TextInput
                        // keyboardType='numeric'
                        allowFontScaling={false}
                        placeholderTextColor={'rgba(255, 255, 255, 0.35)'}
                        style={ styles.mobileInput}
                        value={psw}
                        onChangeText={(text) => {
                            setPsw(text)
                        }}
                    />

                    <View style={styles.eyeBtn}>
                        <Image source={Images.eye_open}
                               resizeMode={'contain'}
                               style={{width:screen.PIXEL_40,height:screen.PIXEL_40}}/>
                    </View>

                </View>


                <Text style={{fontSize: 12,color:'#000',marginTop: screen.PIXEL_30}}>{Constants.login.new_password}</Text>

                <View style={styles.inputWrap}>
                    <TextInput
                        // keyboardType='numeric'
                        allowFontScaling={false}
                        placeholderTextColor={'rgba(255, 255, 255, 0.35)'}
                        style={ styles.mobileInput}
                        value={newpsw}
                        onChangeText={(text) => {
                            setNewpsw(text)
                        }}
                    />

                    <View style={styles.eyeBtn}>
                        <Image source={Images.eye_open}
                               resizeMode={'contain'}
                               style={{width:screen.PIXEL_40,height:screen.PIXEL_40}}/>
                    </View>

                </View>

                <Text style={{fontSize: 12,color:'#000',marginTop: screen.PIXEL_30}}>{Constants.login.confirm_password}</Text>

                <View style={styles.inputWrap}>
                    <TextInput
                        // keyboardType='numeric'
                        allowFontScaling={false}
                        placeholderTextColor={'rgba(255, 255, 255, 0.35)'}
                        style={ styles.mobileInput}
                        secureTextEntry={true}
                        value={newpsw1}
                        onChangeText={(text) => {
                            setNewpsw1(text)
                        }}
                    />

                    <View style={styles.eyeBtn}>
                        <Image source={Images.eye_close}
                               resizeMode={'contain'}
                               style={{width:screen.PIXEL_40,height:screen.PIXEL_40}}/>
                    </View>

                </View>

                {
                    enable ? (
                        <LGBtn
                            style={{width:'100%',height:screen.PIXEL_80,marginTop:screen.PIXEL_60}}
                            title={Constants.login.submit}
                            onPress={()=> {
                                onSubmit()

                            } }
                        />
                    ):(
                        <View style={ styles.btnGray}>
                            <Text style={{color:'#fff',fontSize:16}}>{Constants.login.submit}</Text>
                        </View>
                    )
                }


            </ScrollView>


            <VerifyDialog
                ref={verifyDialog}
            />
        </View>
    )
}

const styles= StyleSheet.create({
    container:{
        flex:1
    },
    content:{
        flex:1,
        paddingHorizontal:screen.PIXEL_60
    },
    row:{
        height: screen.PIXEL_80, width: '100%',flexDirection:'row',alignItems: 'center',
        justifyContent: 'space-between',borderBottomWidth:1,borderBottomColor:'rgba(32,32,32,0.3)'
    },
    leftText:{
        fontFamily:getffly("bold"), color: '#377C74',
        textAlign: 'center', padding: 0, fontSize: 20,
        // '#A6C4C3'
    },
    right:{
        width:screen.PIXEL_30,height:screen.PIXEL_30
    },
    inputWrap:{
        width:'100%',
        height:screen.PIXEL_90,
        flexDirection:'row',
        borderBottomWidth:1,
        borderBottomColor:'rgba(32,32,32,0.3)'
    },mobileInput:{
        fontFamily: getffly(FontFamily.bold),
        flex:1,
        fontSize:20,
        color:'#377C74',
        marginRight:screen.PIXEL_60
    },eyeBtn:{
        width:screen.PIXEL_50,
        height:screen.PIXEL_50,
        position:'absolute',
        right:0,
        top:screen.PIXEL_20,
        justifyContent: 'center',
        alignItems:'center'
    },btnGray:{
        backgroundColor:'#C1C1C1',height:screen.PIXEL_80,width:'100%',marginTop:screen.PIXEL_60,
        borderRadius:screen.PIXEL_40,justifyContent:'center',alignItems:'center'
    }

})
